﻿window.onload = function () {
    //轮播图 
    const slides = document.querySelectorAll('.picFocus-top img');
    const thumbnails = document.querySelectorAll('.picFocus-bottom-box');
    const picFocusBottom = document.querySelector('.picFocus-bottom');
    const picBoxes = picFocusBottom.querySelectorAll('.picFocus-bottom-box');
    const arrowl = document.querySelector('.arrow-l');
    const arrowr = document.querySelector('.arrow-r');
    const currentSlideDisplay = document.querySelector('.current-slide'); // 获取显示当前图片索引的元素



    const phonenumber = document.querySelector('.des-top-infos a');
    let currentSlide = 0;
    /*电话省略替代为*号 */
    function replaceMiddleWithAsterisk(text, maxLength = 11) {
        if (text.length < maxLength) {
            return text; // 字符串长度未超过maxLength，无需替换  
        }
        const start = text[0] + text[1] + text[2]; // 字符串的首字符  
        const end = text[text.length - 1]; // 字符串的尾字符  
        const middleLength = maxLength - 2; // 中间需要替换为*的长度  
        const middle = '*'.repeat(middleLength); // 生成等长的*字符串  

        return start + middle + end; // 拼接首字符、*字符串和尾字符  
    }
    phonenumber.textContent = replaceMiddleWithAsterisk(phonenumber.textContent, 11);

    //营业状态
    const operatingState = document.querySelector('.des-top-intro .des-top-intro-OperatingState');
    if (parseInt(operatingState.getAttribute('value').trim(), 10) == 1) {
        operatingState.textContent = '营业中'
    }
    else {
        operatingState.textContent = '停止营业'
    }

    /*可否空转*/
    const canIdling = document.querySelector('.des-top-intro .des-top-intro-CanIdling');
    console.log('value', canIdling.getAttribute('value'))
    if (canIdling.getAttribute('value') == true) {
        canIdling.textContent = '可空转';
    }
    else {
        canIdling.textContent = '不可空转';
    }


    /*租金*/
    const Rent = document.querySelector('.square-meter span');
    // 获取span中的值，并尝试转换为数字  
    var Rentvalue = parseFloat(Rent.textContent.trim());

    // 检查是否成功转换为数字  
    if (!isNaN(Rentvalue)) {
        // 找到em标签  
        var dayRent = document.querySelector('.square-meter em');

        // 如果也找到了em标签，则进行计算并替换其内容  
        if (dayRent) {
            // 计算value除以30的结果  
            var result = Rentvalue / 30;

            // 替换em标签的内容  
            dayRent.textContent = result.toFixed(2) + ' 元/m²'; // 假设你想要保留两位小数  

            // 注意：这里我们假设em标签内只有文本和单位，如果需要保留原单位，则如上所示拼接字符串  
        }
    }


 
 

    // 初始化图片透明度  
    picBoxes.forEach((box, index) => {
        const image = box.querySelector('img');
        if (index === 0) {
            image.style.opacity = 1;  //不透明
        } else {
            image.style.opacity = 0.5;  //半透明
        }
    });


    // 切换图片函数  
    function changeSlide(newIndex) {
        slides[currentSlide].classList.remove('active');
        thumbnails[currentSlide].classList.remove('active-thumbnail');
        currentSlide = newIndex;
        slides[currentSlide].classList.add('active');
        thumbnails[currentSlide].classList.add('active-thumbnail');

        // 更新图片透明度和当前图片索引显示  

        updateSlideDisplay();
    }
    // 更新图片透明度和当前图片索引显示的函数  
    function updateSlideDisplay() {
        // 更新图片透明度（如果需要的话）  
        picBoxes.forEach((box, index) => {
            const image = box.querySelector('img');
            if (index === currentSlide) {
                image.style.opacity = 1;
            } else {
                image.style.opacity = 0.5;
            }
        });

        // 更新当前图片索引显示  
        currentSlideDisplay.textContent = `${currentSlide + 1}/${slides.length}`;
    }

    // 初始状态下第一张图片和对应的缩略图设置为激活状态
    slides[0].classList.add('active');
    thumbnails[0].classList.add('active-thumbnail');

    // 点击缩略图切换图片  
    thumbnails.forEach((thumbnail, index) => {
        thumbnail.addEventListener('click', () => {
            changeSlide(index);
        });
    });

    // 左右箭头切换图片  
    arrowl.addEventListener('click', () => {
        changeSlide((currentSlide - 1 + slides.length) % slides.length);
    });

    arrowr.addEventListener('click', () => {
        changeSlide((currentSlide + 1) % slides.length);
    });
   
};